<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                template="/WEB-INF/templates/mainLayout.xhtml">

    <ui:define name="leftContent">
        <ui:include src="../content/left-tree-content.xhtml" />
    </ui:define>

    <ui:define name="mainContent">
        <h:outputStylesheet name="css/submenu-style.css"/>
        <h:outputStylesheet name="css/table-style.css"/>

        <div id="folderTopContent" class="folder-content" style="margin: 20px; height: 180px;">

            <div style="float: left;">
                <div class="photo-cantainer" style="text-align: center;">
                    <p:graphicImage id="photo-panel" value="../../resources/img/empty-picture-2.png" width="150" height="170"/>
                </div>

                <h:form>
                    <p:contextMenu for=":photo-panel" style="z-index: 50">
                        <p:menuitem value="De pe disk"/>
                        <p:menuitem value="Web cam"/>
                    </p:contextMenu>
                </h:form>
            </div>

            <div style="margin-left: 170px; height: 230px;">
                <ui:include src="../content/person-info-content.xhtml"/>
            </div>

        </div>

        <div id="folderBottomContent" class="folder-content folderBottomContent" style="margin: 0 20px 20px 20px;">
            <p:fragment autoUpdate="true">
                <div id="submenu-wrapper">
                    <div id="submenu-title-container">
                        <h2>#{pageTitle}</h2>
                    </div>
                    <div id="submenu-aftertitle-container">
                        <ui:insert name="afterTitle"/>
                    </div>
                    <div id="submenu-container">
                        <h:form>
                            <ui:include src="../content/submenu.xhtml"/>
                        </h:form>
                    </div>
                </div>
            </p:fragment>

            <p:outputPanel id="tabs-panel" layout="block">
                <p:outputPanel layout="block" rendered="#{menuBean.subMenuIndex == 0}">
                    <ui:include src="../content/tabsContent/employment-data.xhtml"/>
                </p:outputPanel>

                <p:outputPanel layout="block" rendered="#{menuBean.subMenuIndex == 1}">
                    <ui:include src="../content/tabsContent/skills-data.xhtml"/>
                </p:outputPanel>

                <p:outputPanel layout="block" rendered="#{menuBean.subMenuIndex == 2}">
                    <ui:include src="../content/tabsContent/additional-data.xhtml"/>
                </p:outputPanel>
            </p:outputPanel>
        </div>

    </ui:define>

</ui:composition>